<template>
  <div id="cs-home">
    <cs-header></cs-header>
    <div class="main">
      <div class="menu" :style="{ height: `${height}px` }">
        <happy-scroll color="rgba(189, 189, 189, .5)" resize>
          <el-menu :router="true" :unique-opened="true" :default-active="path">
            <el-submenu :index="index + ''" v-for="(item, index) in data" :key="item.id">
              <template slot="title">
                <i class="iconfont" :class="item.obj.iconId" style="padding-right: 5px"></i>
                <span>{{ item.obj.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="val.obj.url || '#'"
                  v-for="val in item.children"
                  :key="val.id"
                  @click.native="updatePath(val.obj.url)"
                >{{ val.obj.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </happy-scroll>
      </div>
      <div class="container" :style="{ height: `${height}px` }">
        <!--<p class="page-title font16 bg-color-white">{{ title }}</p>-->
        <div class="container-main">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import csHeader from './header'
import { nextPage } from '../../../assets/js/index'
import ajax from '../../../api/ajax/ajax'
import api from '../../../api/url'
import { mapGetters } from 'vuex'

export default {
  name: 'cs-home',
  components: {
    csHeader
  },
  data () {
    return {
      data: [],
      height: 0
    }
  },
  computed: {
    ...mapGetters(['path'])
  },
  methods: {
    // 获取当前系统
    getCurrSystem () {
      ajax.post(api.GET_CURR_SYSTEM).then(res => {
        this.sysNo = res.data
        if (
          this.sysNo === 'M201' ||
          this.sysNo === 'M203' ||
          this.sysNo === 'M204' ||
          this.sysNo === 'M205'
        ) {
          // 201分析, 203发布，204网关，205推送
          ajax.post(api.GETMENU, { sys_no: this.sysNo }).then(res => {
            this.data = res.data
          })
          ajax.post(api.QUERYALLCOMMONDATA).then(res => {
            this.commonData = res.data
            sessionStorage.setItem(
              'commonData',
              JSON.stringify(this.commonData)
            )
          })
        } else if (this.sysNo === 'M202') {
          ajax
            .post(api.GETMENU2, {
              sys_no: this.sysNo
            })
            .then(res => {
              this.data = res.data
            })
        }
      })
    },
    updatePath (url) {
      nextPage(url)
    }
  },
  created () {
    this.getCurrSystem()
    this.height = window.innerHeight - 50
    window.onresize = () => {
      this.height = window.innerHeight - 50
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
#cs-home
  .main
    padding-left 200px
    position relative
    .menu
      position absolute
      top 0
      left 0
      width 200px
      background #fff
      .happy-scroll-container
        width 100% !important
        height 100% !important
        .happy-scroll-content
          width 100%
          .el-menu
            background #fff
            border-right solid 0
          .el-submenu .el-menu-item
            padding-left 45px !important
            min-width 160px
            /*color #bbb*/
          .el-submenu__title, .el-submenu .el-menu-item
            height 35px
            line-height 35px
          .el-menu-item-group
            .el-menu-item-group__title
              padding 0
            .el-menu-item
              position relative
            /*.el-menu-item:before
              content ''
              width 3px
              height 3px
              background #303133
              position absolute
              top 16px
              left 27px*/
          /*.el-submenu__title, i.iconfont
            color #bbb*/
          .el-menu-item:focus, .el-menu-item:hover
            background #4093ff
            color #fff
          .el-submenu__title:focus, .el-submenu__title:hover
            background #4093ff
            color #fff
          .is-active
            .el-submenu__title, i.iconfont, span
              color #4093ff
            /*.el-menu-item-group
              .is-active
                  color #4093ff*/
            .el-menu-item:hover
              background #4093ff
            .is-active:hover
              color #fff
            .el-submenu__title:hover
              i.iconfont, span
                color #fff
    .container
      .page-title
        height 50px
        line-height 50px
        padding 0 20px
        font-weight bold
        margin-bottom 10px
      .container-main
        height 100%
  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #fff;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
  }
</style>
